<template>
    <div class="balance">
        <div class="item1">
            <div class="label">我的能量币</div>
            <div class="value" v-if="userStore.user.bank != 0">{{ (numdata.KZZ + numdata.BKZZ).toFixed(2) }}</div>
            <div class="value" v-if="userStore.user.bank == 0">--</div>
        </div>
        <div class="item2">
            <div class="label">可转账能量</div>
            <div class="value" v-if="userStore.user.bank != 0">{{ numdata.KZZ.toFixed(2) }}</div>
            <div class="value" v-if="userStore.user.bank == 0">--</div>
        </div>
        <div class="item3">
            <div class="label">不可转账能量</div>
            <div class="value" v-if="userStore.user.bank != 0">{{ numdata.BKZZ.toFixed(2) }}</div>
            <div class="value" v-if="userStore.user.bank == 0">--</div>
        </div>
        <div class="item4">
            <div style="display: flex;" v-if="userStore.user.bank != 0">
                <el-text line-clamp="2" style="width: 310px">
                    {{ userStore.user.bank }}
                </el-text>
                <div class="copy" style="margin-left: 4px" @click="copyText()">复制</div>
            </div>

            <!-- <span v-if="userStore.user.bank != 0">{{userStore.user.bank}}<span style="margin-left: 4px" class="copy">复制</span></span> -->
            <div class="value" v-if="userStore.user.bank == 0">--</div>

        </div>
    </div>
</template>

<script setup>
import { ElMessage } from 'element-plus'

const userStore = useUserStore()
const props = defineProps({
    numdata: Object
})



const copyText = async () => {
    try {
        await navigator.clipboard.writeText(userStore.user.bank);
        ElMessage.success('已复制到剪贴板')
    } catch (err) {
        console.error("复制失败", err);
    }
}

</script>

<style lang="scss" scoped>
.balance {
    display: flex;
    margin-bottom: 32px;
}

// .hidden2 {
//     display: -webkit-box;
//     -webkit-box-orient: vertical;
//     -webkit-line-clamp: 2;
//     /* 显示的行数 */
//     overflow: hidden;
//     text-overflow: ellipsis;
// }

.item1 {
    width: 270px;
    display: flex;
    flex-direction: column;


    .label {
        font-size: 16px;
        color: #8a8a8a;
    }

    .value {
        font-size: 24px;
        font-weight: bold;
        color: #333;
        margin-top: 4px;
    }
}


.item2,
.item3 {
    width: 164px;
    display: flex;
    flex-direction: column;




    .label {
        font-size: 14px;
        color: #8a8a8a;
        text-align: center;
    }

    .value {
        font-size: 24px;
        font-weight: bold;
        color: #02a66e;
        text-align: center;
        margin-top: 4px;
    }
}

.item2 {
    padding-right: 16px;
    border-right: 1px solid #d8d8d8;
}

.item2 {
    padding-left: 16px;
}

.item4 {
    width: 366px;
    overflow: hidden;
    margin-left: 32px;
    flex: 1;
    // height: 56px;
    background-color: #fafafa;
    padding: 12px;
    display: flex;


    span {
        font-size: 12px;
        color: #333;
    }

    .copy {
        height: 100%;
        display: flex;
        align-items: center;
        font-size: 12px;
        color: #ff7900;
        cursor: pointer;

    }
}
</style>